<template>
	<view class="content">
		<!-- 头部 -->
		<view class="head">
			<text>首页</text>
			<image src="../../static/index/hs.png" mode="" class="po-img"></image>
			<input type="text" value="" class="ipt" placeholder="搜索相关信息" placeholder-style=" color: grey" />
			<image src="../../static/index/xx.png" mode=""></image>
			<image src="../../static/index/jia.png" mode=""></image>
		</view>
		<view class="head-tc"></view>
		<view class="head-down">
			<view class="hd-bg"></view>
			<image src="../../static/index/yellow.png" mode=""></image>
		</view>
		<!-- 菜单 -->
		<view class="main">
			<view class="main-img-text" @tap="runFinancial()" v-for="item in menuArr" :key="item.id">
				<image :src="item.imageSrc" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>

		<!-- 流动 -->
		<view class="liudong">
			<text>A股 实时金价格</text> <text class="liudong1">373.00</text><text class="liudong2">-4.92</text><text
				class="liudong3">-1.19%</text>
		</view>
		<!-- 财富直通车 -->
		<view class="caifu-che">
			<text class="caifu-che-tatil">财富直通车</text>
			<view class="caifu-che-left">
				<text class="caifu-che-left-tatil">{{menuCar[0].title}}</text>
				<text class="caifu-che-left-two">领取你的避坑宝典</text>
				<text class="caifu-che-left-xiaobig">还可</text>
				<text class="caifu-che-left-big">{{menuCar[0].bigText}}</text>
				<text class="caifu-che-left-end">{{menuCar[0].startToEnd}}</text>
				<button type="default" class="caifu-che-btn">立即参与 > </button>
			</view>
			<view class="caifu-che-right">
				<view class="caifu-che-right-top">
					<text class="caifu-che-right-xiaobig">{{menuCar[1].title}}</text>
					<text class="caifu-che-right-xiao">{{menuCar[1].desc}}</text>
					<button type="default" class="caifu-che-btn">立即参与 > </button>
				</view>
				<view class="caifu-che-right-down">
					<text class="caifu-che-right-xiaobig">{{menuCar[2].title}}</text>
					<text class="caifu-che-right-xiao">{{menuCar[2].desc}}</text>
					<button type="default" class="caifu-che-btn">立即参与 > </button>
				</view>
			</view>
		</view>
		<!-- 贷款服务 -->
		<view class="daikuan-serve">
			<text class="daikuan-serve-title">贷款服务</text>
			<view class="daikuan-serve-main">
				<text class="daikuan-serve-main-t1">轻松贷款</text> <text
					class="daikuan-serve-main-t2">最低日利率0.02%</text><text class="daikuan-serve-main-t4">快速提现</text>
				<text class="daikuan-serve-main-red-text">200,000,00</text>
				<text class="daikuan-serve-main-c9-text">最高可借额度(元)</text>
				<button type="default" class="daikuan-serve-main-btn">获取我的额度</button>
			</view>
		</view>
		<!-- 王牌理财热销榜 -->
		<view class="TrumpCard-list">
			<text class="TrumpCard-list-title">
				王牌理财热销榜
			</text>
			<view class="TrumpCard-list-four-texts">
				<text v-for="item in TrumpCardArr" :key="item.id" :class="{ fourActive:item.id==TrumpCardActive}"
					@tap="nowName(item.id)">{{item.name}}</text>
			</view>
			<swiper class="TrumpCard-list-louceng" circular="true" :current="TrumpCardActive" @change="TrumpCardSwiper">
				<swiper-item>
					<view class="TrumpCard-list-louceng-ones">
						<view class="TrumpCard-list-louceng-one">
							<view class="TrumpCard-list-louceng-one-top">
								<text class="TrumpCard-list-louceng-one1">活期理财</text>
								<text class="TrumpCard-list-louceng-one2">国金众赢货币</text>
								<text class="TrumpCard-list-louceng-one3">优选货基</text>
							</view>
							<text class="TrumpCard-list-louceng-one-red">3.90</text>
							<text class="TrumpCard-list-louceng-one-xred">%</text>
							<text class="TrumpCard-list-louceng-one-black">灵活申赎</text>
							<view class="wid100">
								<text
									class="TrumpCard-list-louceng-one-normal TrumpCard-list-louceng-one-normal1">七日年化收益率</text>
								<text class="TrumpCard-list-louceng-one-normal">低风险</text>
								<text class="TrumpCard-list-louceng-one-normal">|</text>
								<text class="TrumpCard-list-louceng-one-normal">100元起购</text>
							</view>
							<button type="default" class="TrumpCard-list-louceng-btn">去抢购</button>
						</view>
						<view class="TrumpCard-list-louceng-one">
							<view class="TrumpCard-list-louceng-one-top">
								<text class="TrumpCard-list-louceng-one1">报价回购</text>
								<text class="TrumpCard-list-louceng-one2">中信建投固收宝</text>
								<text class="TrumpCard-list-louceng-one3">低风险</text>
								<text class="TrumpCard-list-louceng-one3">100元起</text>
							</view>
							<text class="TrumpCard-list-louceng-one-red">6.00</text>
							<text class="TrumpCard-list-louceng-one-xred">%</text>
							<text class="TrumpCard-list-louceng-one-black">28天</text>
							<view class="wid100">
								<text
									class="TrumpCard-list-louceng-one-normal TrumpCard-list-louceng-one-normal1">约定年化收益率</text>
								<text class="TrumpCard-list-louceng-one-normal">先开户</text>
								<text class="TrumpCard-list-louceng-one-normal">|</text>
								<text class="TrumpCard-list-louceng-one-normal">再购买</text>
							</view>
							<button type="default" class="TrumpCard-list-louceng-btn">去抢购</button>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<text>第2页</text>
				</swiper-item>
				<swiper-item>
					<text>第3页</text>
				</swiper-item>
				<swiper-item>
					<text>第4页</text>
				</swiper-item>
			</swiper>
		</view>

		<!-- 爆款推荐 -->
		<view class="recommendHot">
			<text class="recommendHot-title">爆款推荐</text>
			<swiper next-margin="300rpx" class="recommendHot-sv" display-multiple-items=2>
				<swiper-item class="recommendHot-sv-v">
					<text class="recommendHot-sv-v-t1">天宏永利债券B</text>
					<view class="recommendHot-sv-v-t2_3">
						<text class="recommendHot-sv-v-t2">15.05</text>
						<text class="recommendHot-sv-v-t3">%</text>
					</view>
					<text class="recommendHot-sv-v-t4">近一年涨幅</text>
					<view class="recommendHot-sv-v-t5s">
						<text class="recommendHot-sv-v-t5">严控风险</text>
						<text class="recommendHot-sv-v-t5">债券型</text>
					</view>
				</swiper-item>
				<swiper-item class="recommendHot-sv-v">
					<text class="recommendHot-sv-v-t1">天宏永利债券B</text>
					<view class="recommendHot-sv-v-t2_3">
						<text class="recommendHot-sv-v-t2">15.05</text>
						<text class="recommendHot-sv-v-t3">%</text>
					</view>
					<text class="recommendHot-sv-v-t4">近一年涨幅</text>
					<view class="recommendHot-sv-v-t5s">
						<text class="recommendHot-sv-v-t5">严控风险</text>
						<text class="recommendHot-sv-v-t5">债券型</text>
					</view>
				</swiper-item>
				<swiper-item class="recommendHot-sv-v">
					<text class="recommendHot-sv-v-t1">天宏永利债券B</text>
					<view class="recommendHot-sv-v-t2_3">
						<text class="recommendHot-sv-v-t2">15.05</text>
						<text class="recommendHot-sv-v-t3">%</text>
					</view>
					<text class="recommendHot-sv-v-t4">近一年涨幅</text>
					<view class="recommendHot-sv-v-t5s">
						<text class="recommendHot-sv-v-t5">严控风险</text>
						<text class="recommendHot-sv-v-t5">债券型</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 理财优选 -->
		<view class="licaiGood">
			<text class="licaiGood-title">
				理财优选
			</text>
			<view class="licaiGood-louceng">
				<text class="licaiGood-louceng-red">3.90</text>
				<text class="licaiGood-louceng-red1">%</text>
				<text class="licaiGood-louceng-black">远见开放19号(TG01190)</text>
				<text class="licaiGood-louceng-grey">业绩比较基准</text>
				<view class="licaiGood-louceng-blues">
					<text class="licaiGood-louceng-blue">1万元起购</text>
					<text class="licaiGood-louceng-blue">稳健收益</text>
					<text class="licaiGood-louceng-blue">净值型</text>
				</view>
			</view>
			<view class="licaiGood-louceng">
				<text class="licaiGood-louceng-red">3.90</text>
				<text class="licaiGood-louceng-red1">%</text>
				<text class="licaiGood-louceng-black">远见半年开放4号</text>
				<text class="licaiGood-louceng-grey">业绩比较基准</text>
				<view class="licaiGood-louceng-blues">
					<text class="licaiGood-louceng-blue">1万元起购</text>
					<text class="licaiGood-louceng-blue">稳健收益</text>
					<text class="licaiGood-louceng-blue">净值型</text>
				</view>
			</view>
		</view>
		<!-- 财富头条 -->
		<view class="caifu-first">
			<text class="caifu-first-title">财富头条</text>
			<view class="caifu-first-ing" v-for="item in menuFirst" :key="item.id">
				<view class="caifu-first-ing-left">
					<view class="caifu-first-ing-left-top">
						<image :src="item.headImage" mode=""></image>
						<text class="caifu-first-ing-left-top-t">{{item.name}}</text>
					</view>
					<view class="caifu-first-ing-left-middle">
						<text class="caifu-first-ing-left-middle-onetext">{{item.title}}</text>
						<text class="caifu-first-ing-left-middle-twotext">{{item.mainContents}}</text>
					</view>
					<view class="caifu-first-ing-left-down">
						<text>为您推荐</text><text>·</text><text class="caifu-first-ing-left-down-entT">12小时前</text>
					</view>
				</view>
				<image :src="item.image" mode="" class="caifu-first-ing-right"></image>
			</view>

			<view class="caifu-first-ing">
				<view class="caifu-first-ing-left">
					<view class="caifu-first-ing-left-top">
						<image src="../../static/index/hd.png" mode=""></image>
						<text class="caifu-first-ing-left-top-t">宏德金融</text>
					</view>
					<view class="caifu-first-ing-left-middle">
						<text class="caifu-first-ing-left-middle-onetext">这是一个很长的标题长得我都不想写了</text>
						<text
							class="caifu-first-ing-left-middle-twotext">这是一个很长的标题长得我都不想写了这是一个很长的标题长得我都不想写了这是一个很长的标题长得我都不想写了</text>
					</view>
					<view class="caifu-first-ing-left-down">
						<text>为您推荐</text><text>·</text><text class="caifu-first-ing-left-down-entT">12小时前</text>
					</view>
				</view>
				<image src="../../static/index/hds.png" mode="" class="caifu-first-ing-right"></image>
			</view>
			<view class="caifu-first-ing">
				<view class="caifu-first-ing-left">
					<view class="caifu-first-ing-left-top">
						<image src="../../static/index/jk.png" mode=""></image>
						<text class="caifu-first-ing-left-top-t">J·K债券</text>
					</view>
					<view class="caifu-first-ing-left-middle">
						<text class="caifu-first-ing-left-middle-onetext">这是一个很长的标题长得我都不想写了</text>
						<text
							class="caifu-first-ing-left-middle-twotext">这是一个很长的标题长得我都不想写了这是一个很长的标题长得我都不想写了这是一个很长的标题长得我都不想写了</text>
					</view>
					<view class="caifu-first-ing-left-down">
						<text>为您推荐</text><text>·</text><text class="caifu-first-ing-left-down-entT">12小时前</text>
					</view>
				</view>
				<image src="../../static/index/jks.png" mode="" class="caifu-first-ing-right"></image>
			</view>
			<view class="caifu-first-ing">
				<view class="caifu-first-ing-left">
					<view class="caifu-first-ing-left-top">
						<image src="../../static/index/sc.png" mode=""></image>
						<text class="caifu-first-ing-left-top-t">Super市场</text>
					</view>
					<view class="caifu-first-ing-left-middle">
						<text class="caifu-first-ing-left-middle-onetext">这是一个很长的标题长得我都不想写了</text>
						<text
							class="caifu-first-ing-left-middle-twotext">这是一个很长的标题长得我都不想写了这是一个很长的标题长得我都不想写了这是一个很长的标题长得我都不想写了</text>
					</view>
					<view class="caifu-first-ing-left-down">
						<text>为您推荐</text><text>·</text><text class="caifu-first-ing-left-down-entT">12小时前</text>
					</view>
				</view>
				<image src="../../static/index/scs.png" mode="" class="caifu-first-ing-right"></image>
			</view>

		</view>

		<!-- 触底 -->
		<view class="chudi">
			<text>加载更多...</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				TrumpCardArr: [{
					id: 0,
					name: '短期精选'
				}, {
					id: 1,
					name: '保险理财'
				}, {
					id: 2,
					name: '稳健理财'
				}, {
					id: 3,
					name: '基金爆品'
				}],
				TrumpCardActive: 0,
				menuArr: [],
				menuCar: [],
				menuFirst: []
			}
		},
		onLoad() {
			this.caidan();
			this.caifuCar();
			this.firstCaifu();
		},
		methods: {
			nowName(id) {
				this.TrumpCardActive = id;
			},
			TrumpCardSwiper(e) {
				this.TrumpCardActive = e.detail.current;
			},
			//获取菜单
			async caidan() {
				const res = await this.$request({
					url: '/sys/navigation/info', //仅为示例，并非真实接口地址。
					method: "GET",
				})
				if (res.code == 200) {
					this.menuArr = res.data;
				}
			},
			//财富直通车
			async caifuCar() {
				const res = await this.$request({
					url: '/sys/fortunecar/info',
					method: "post",
				})
				if (res.code == 200) {
					this.menuCar = res.data;
				}
			},
			//财富头条
			async firstCaifu() {
				const res = await this.$request({
					url: '/sys/fortuneheadlines/info',
					method: "post",
					data: {
						"pageNum": 0,
						"pageSize": 0,
						"username": ""
					}
				})
				if (res.code == 200) {
					this.menuFirst = res.data.list;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		overflow: hidden;


		//王牌理财热销榜

		.TrumpCard-list {
			box-sizing: border-box;
			width: 700rpx;
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 50rpx;

			.TrumpCard-list-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: block;
			}

			.TrumpCard-list-title::after {
				content: '';
				background-image: url(../../static/index/right.png);
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				width: 15rpx;
				height: 26rpx;
				top: 0rpx;
				right: -25rpx;
			}

			.TrumpCard-list-four-texts {
				margin-top: 20rpx;
				height: 48rpx;
				width: 100%;
				display: flex;
				justify-content: space-around;
				font-size: 24rpx;
				color: #999;
				display: flex;
				align-items: center;

				.fourActive {
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: 600;
					display: inline-block;
					background-color: #4590ef;
					width: 144rpx;
					height: 48rpx;
					border-radius: 10rpx;
					text-align: center;
					line-height: 48rpx;
				}
			}

			.TrumpCard-list-louceng {
				width: 704rpx;
				height: 40vh;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 30rpx;
				display: flex;
				flex-wrap: wrap;

				.TrumpCard-list-louceng-ones {
					display: flex;
					flex-wrap: wrap;

					.TrumpCard-list-louceng-one {
						height: 208rpx;
						width: 100%;
						position: relative;
						border-bottom: 4rpx solid #fafafa;

						.TrumpCard-list-louceng-btn {
							width: 174rpx;
							height: 64rpx;
							background-color: #3476f1;
							color: #fff;
							line-height: 64rpx;
							font-size: 28rpx;
							position: absolute;
							right: 0;
							top: 74rpx;
						}

						.TrumpCard-list-louceng-one-top {
							display: flex;
							align-items: center;
							margin-bottom: 30rpx;

							.TrumpCard-list-louceng-one1 {
								font-size: 28rpx;
								color: #333333;
								display: inline-block;
								padding-right: 10rpx;
							}

							.TrumpCard-list-louceng-one2 {
								font-size: 28rpx;
								color: #333333;
								display: inline-block;
								padding-right: 20rpx;
							}

							.TrumpCard-list-louceng-one3 {
								font-size: 20rpx;
								color: #cd9b53;
								display: inline-block;
								height: 36rpx;
								line-height: 36rpx;
								width: 104rpx;
								background-color: #f5ecde;
								text-align: center;
								border-radius: 5rpx;
								margin-right: 10rpx;
							}
						}

						.TrumpCard-list-louceng-one-red {
							font-size: 33rpx;
							color: #f85656;
							font-weight: 800;
						}

						.TrumpCard-list-louceng-one-xred {
							font-size: 26rpx;
							color: #f85656;
							font-weight: 800;
							display: inline-block;
							width: 104rpx;
							margin-bottom: 20rpx;
						}

						.TrumpCard-list-louceng-one-black {
							font-size: 30rpx;
							font-weight: 800;
						}

						.wid100 {
							width: 100%;

							.TrumpCard-list-louceng-one-normal {
								margin-top: 10rpx;
								font-size: 20rpx;
								color: #868686;
								display: inline-block;
								padding-right: 10rpx;
							}

							.TrumpCard-list-louceng-one-normal1 {
								padding-right: 40rpx;
							}
						}
					}

				}

			}
		}

		//触底
		.chudi {
			height: 60rpx;
			width: 100%;
			text-align: center;

			text {
				color: #999;
				font-size: 24rpx;
			}
		}

		//财富头条
		.caifu-first {
			width: 700rpx;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin: 0 auto;
			margin-top: 20rpx;

			.caifu-first-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: block;
			}

			.caifu-first-ing {
				display: flex;
				justify-content: space-between;
				border: 4rpx solid #fafafa;
				border-radius: 20rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				position: relative;
				margin-top: 20rpx;

				.caifu-first-ing-left {
					display: flex;
					width: 355rpx;
					flex-wrap: wrap;

					.caifu-first-ing-left-top {
						display: flex;
						align-items: center;

						image {
							height: 56rpx;
							width: 56rpx;
							margin-right: 20rpx;
						}

						.caifu-first-ing-left-top-t {
							font-size: 28rpx;
							color: #999;
						}
					}

					.caifu-first-ing-left-middle {
						width: 100%;
						margin-bottom: 60rpx;

						.caifu-first-ing-left-middle-onetext {
							color: #333;
							font-size: 28rpx;
							overflow: hidden;
							font-weight: 800;
							word-break: break-all;
							/* break-all(允许在单词内换行。) */
							text-overflow: ellipsis;
							/* 超出部分省略号 */
							display: -webkit-box;
							/** 对象作为伸缩盒子模型显示 **/
							-webkit-box-orient: vertical;
							/** 设置或检索伸缩盒对象的子元素的排列方式 **/
							-webkit-line-clamp: 1;
							/** 显示的行数 **/
						}

						.caifu-first-ing-left-middle-twotext {
							font-size: 24rpx;
							color: #999;
							overflow: hidden;
							word-break: break-all;
							/* break-all(允许在单词内换行。) */
							text-overflow: ellipsis;
							/* 超出部分省略号 */
							display: -webkit-box;
							/** 对象作为伸缩盒子模型显示 **/
							-webkit-box-orient: vertical;
							/** 设置或检索伸缩盒对象的子元素的排列方式 **/
							-webkit-line-clamp: 2;
							/** 显示的行数 **/
						}
					}

					.caifu-first-ing-left-down {
						font-size: 24rpx;
						color: #999;

						text {
							padding-right: 10rpx;
						}

						.caifu-first-ing-left-down-entT {
							font-weight: 800;
						}

					}
				}

				.caifu-first-ing-right {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.caifu-first-ing::after {
				content: "...";
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				color: #999;
			}
		}

		//理财优选
		.licaiGood {
			width: 700rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto;
			margin-top: 40rpx;

			.licaiGood-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: block;
			}

			.licaiGood-louceng {
				width: 100%;
				height: 152rpx;
				box-sizing: border-box;
				padding: 20rpx;
				border: 2rpx solid #fbfbfb;
				border-radius: 10rpx;
				position: relative;
				border: 3rpx solid #fafafa;
				margin-top: 10rpx;

				.licaiGood-louceng-red {
					font-size: 33rpx;
					color: #f85656;
					font-weight: 800;
				}

				.licaiGood-louceng-red1 {
					font-size: 26rpx;
					color: #f85656;
					font-weight: 800;
				}

				.licaiGood-louceng-black {
					font-size: 28rpx;
					color: #333;
					position: absolute;
					font-weight: 800;
					right: 0;
				}

				.licaiGood-louceng-grey {
					position: absolute;
					bottom: 30rpx;
					color: #999;
					font-size: 24rpx;
					left: 20rpx;
				}

				.licaiGood-louceng-blues {
					position: absolute;
					width: 100%;
					display: flex;
					justify-content: flex-end;
					bottom: 30rpx;
					right: 0rpx;

					.licaiGood-louceng-blue {
						display: inline-block;
						padding: 5rpx;
						background-color: #eaf1fe;
						color: #8fb4f7;
						font-size: 20rpx;
						margin-right: 10rpx;
					}
				}

			}
		}

		//爆款推荐
		.recommendHot {
			height: 320rpx;
			width: 730rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin: 0 auto;

			.recommendHot-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: block;
			}

			.recommendHot-title::after {
				content: '';
				background-image: url(../../static/index/right.png);
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				width: 15rpx;
				height: 26rpx;
				top: 0rpx;
				right: 60rpx;
			}

			.recommendHot-sv {
				width: 730rpx;
				height: 262rpx;
				display: flex;
				box-sizing: border-box;

				.recommendHot-sv-v {
					display: flex;
					flex-wrap: wrap;
					align-content: space-around;
					justify-content: center;
					width: 300rpx !important;
					height: 262rpx;
					border: 4rpx solid #f9f9f9;
					border-radius: 10rpx;

					.recommendHot-sv-v-t1 {
						font-size: 28rpx;
						display: block;
						font-weight: 600;
						margin-bottom: 10rpx;
					}

					.recommendHot-sv-v-t2_3 {
						width: 100%;
						text-align: center;
						margin-bottom: 5rpx;

						.recommendHot-sv-v-t2 {
							color: #f85656;
							font-size: 33rpx;
							font-weight: 600;
						}

						.recommendHot-sv-v-t3 {
							color: #f85656;
							font-size: 26rpx;
							font-weight: 600;
						}
					}

					.recommendHot-sv-v-t4 {
						font-size: 24rpx;
						color: #868686;
						display: block;
						width: 100%;
						text-align: center;
					}

					.recommendHot-sv-v-t5s {
						width: 100%;
						display: flex;
						justify-content: center;

						.recommendHot-sv-v-t5 {
							display: inline-block;
							padding: 5rpx;
							background-color: #eaf1fe;
							color: #8fb4f7;
							font-size: 20rpx;
							border-radius: 5rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		//贷款服务
		.daikuan-serve {
			width: 700rpx;
			height: 276rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin: 0 auto;
			margin-top: 20rpx;

			.daikuan-serve-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
			}

			.daikuan-serve-main {
				position: relative;
				margin-top: 24rpx;
				height: 222rpx;
				width: 680rpx;
				background-color: #f3f7fe;
				border-radius: 15rpx;
				box-sizing: border-box;
				padding: 15rpx 30rpx 10rpx;

				.daikuan-serve-main-t1 {
					font-size: 28rpx;
					color: #333;
					display: inline-block;
					padding-right: 10rpx;
				}

				.daikuan-serve-main-t2,
				.daikuan-serve-main-t4 {
					font-size: 24rpx;
					color: #999;
					display: inline-block;
					padding: 0 10rpx;
				}

				.daikuan-serve-main-t2 {
					border-right: 1rpx solid #999;
				}

				.daikuan-serve-main-red-text {
					font-size: 44rpx;
					display: inline-block;
					color: #f85656;
					margin-top: 54rpx;
					font-weight: 800;
				}

				.daikuan-serve-main-c9-text {
					font-size: 24rpx;
					display: inline-block;
					width: 100%;
					color: #999;
					margin-top: 14rpx;
				}

				.daikuan-serve-main-btn {
					width: 210rpx;
					height: 60rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #4590ef;
					line-height: 60rpx;
					position: absolute;
					right: 20rpx;
					bottom: 40rpx;
				}
			}
		}

		//财富直通车
		.caifu-che {
			width: 700rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.caifu-che-tatil {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
			}

			.caifu-che-left {
				position: relative;
				margin-top: 10rpx;
				width: 352rpx;
				height: 384rpx;
				border-radius: 24rpx;
				background-image: url(../../static/index/cai-left.png);
				background-size: cover;
				box-sizing: border-box;
				padding: 24rpx 24rpx;

				.caifu-che-left-tatil {
					width: 100%;
					display: inline-block;
					font-size: 40rpx;
					color: #fff;
					margin-bottom: 26rpx;
				}

				.caifu-che-left-two {
					display: inline-block;
					width: 100%;
					color: #fff;
					margin-bottom: 10rpx;
				}

				.caifu-che-left-xiaobig {
					color: #fff;
					font-size: 24rpx;
				}

				.caifu-che-left-big {
					font-size: 32rpx;
					font-weight: 600;
					color: #be7f22;
				}

				.caifu-che-left-end {
					margin-top: 20rpx;
					display: block;
					width: 100%;
					font-size: 28rpx;
					color: #ffeed2;
				}

				.caifu-che-btn {
					position: absolute;
					width: 180rpx;
					height: 60rpx;
					font-size: 24rpx;
					border-radius: 40rpx;
					background-color: #ff7846;
					color: #fff;
					bottom: 30rpx;
				}
			}

			.caifu-che-right {
				margin-top: 10rpx;
				width: 332rpx;
				height: 384rpx;
				display: flex;
				flex-wrap: wrap;

				.caifu-che-right-top {
					box-sizing: border-box;
					padding: 12rpx;
					background-image: url(../../static/index/cai-r-t.png);
					width: 332rpx;
					height: 186rpx;
					border-radius: 10rpx;
					background-size: cover;
					position: relative;

					.caifu-che-right-xiaobig {
						color: #fff;
						font-size: 32rpx;
						font-weight: 600;
						display: block;
						width: 100%;
					}

					.caifu-che-right-xiao {
						color: #bfd5ff;
						font-size: 26rpx;
					}

					.caifu-che-btn {
						position: absolute;
						width: 174rpx;
						height: 48rpx;
						line-height: 48rpx;
						font-size: 24rpx;
						border-radius: 40rpx;
						background-color: #ff7846;
						color: #fff;
						bottom: 20rpx;
					}
				}

				.caifu-che-right-down {
					box-sizing: border-box;
					padding: 12rpx;
					background-image: url(../../static/index/cai-r-b.png);
					width: 332rpx;
					height: 186rpx;
					border-radius: 10rpx;
					background-size: cover;
					position: relative;

					.caifu-che-right-xiaobig {
						color: #fff;
						font-size: 32rpx;
						font-weight: 600;
						display: block;
						width: 100%;
					}

					.caifu-che-right-xiao {
						color: #dcfffa;
						font-size: 26rpx;
					}

					.caifu-che-btn {
						position: absolute;
						width: 174rpx;
						height: 48rpx;
						line-height: 48rpx;
						font-size: 24rpx;
						border-radius: 40rpx;
						background-color: #ff7846;
						color: #fff;
						bottom: 20rpx;
					}
				}
			}
		}

		//  头部 
		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;
			height: 60rpx;
			background-color: #3476f1;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-bottom: 40rpx;
			color: #FFFFFF;
			font-weight: 600;
			font-size: 35rpx;

			.ipt {
				color: #000;
				font-weight: 400;
				box-sizing: border-box;
				padding-left: 80rpx;
				width: 446rpx;
				height: 60rpx;
				font-size: 24rpx;
				border-radius: 30rpx;
				background-color: #fff;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.po-img {
				position: absolute;
				left: 150rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}

		.head-tc {
			height: 60rpx;
			width: 100%;
		}

		.head-down {
			width: 100%;
			height: 240rpx;
			text-align: center;
			position: relative;

			.hd-bg {
				position: absolute;
				z-index: -2;
				height: 200rpx;
				top: 0;
				left: 0;
				background-color: #3476f1;
				width: 100%;
				border-bottom-left-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
			}

			image {
				position: absolute;
				top: 60rpx;
				left: 0;
				right: 0;
				margin: auto;
				height: 240rpx;
				width: 702rpx;
			}
		}

		//菜单
		.main {
			margin-top: 45rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			justify-content: space-between;

			.main-img-text {
				width: 88rpx;
				height: 130rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-content: space-around;
				margin: 0 20rpx;

				image {
					width: 88rpx;
					height: 88rpx;
				}

				text {
					font-size: 20rpx;
					color: #666;
				}
			}
		}

		//流动
		.liudong {
			height: 76rpx;
			width: 90%;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 0 30rpx;
			background-color: #fafafa;
			border: 10rpx;
			color: #666;
			position: relative;
			line-height: 76rpx;

			.liudong1,
			.liudong2,
			.liudong3 {
				color: #f85656;
				position: absolute;
				font-size: 28rpx;
			}

			.liudong1 {
				left: 280rpx;
			}

			.liudong2 {
				right: 130rpx;
			}

			.liudong3 {
				right: 30rpx;
			}
		}
	}
</style>
